<template>
  <div>
    <div class="custom-mark"></div>
    <div class="custom-popup-bg">
      <div class="popup-body">
        <div id="help-modal" class="exam-help">
          <div class="exam-help__title">
            <div class="text">Help</div>
            <div class="close" @click="hideHelpModal"></div>
          </div>
          <div class="exam-help__content">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="Information" name="first">
                <div class="section">
                  <div class="exam-help__section tpl1">
                    <div class="title">INSTRUCTIONS TO CANDIDATES</div>
                    <ul class="lines">
                      <li>Answer all the questions.</li>
                      <li>You can change your answers at any time during the test.</li>
                    </ul>
                  </div>
                  <div class="exam-help__section tpl1">
                    <div class="title">INFORMATION FOR CANDIDATES</div>
                    <ul class="lines">
                      <li>There are 40 questions in this test.</li>
                      <li>Each question carries one mark.</li>
                      <li>There are four parts to the test.</li>
                      <li>You will hear each part once.</li>
                      <li>For each part of the test there will be time for you to look through the
                        questions and time for you to check your answers.</li>
                    </ul>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="Test help" name="second">
                <div data-v-1ebe4f00="" class="section-block">
                  <h4>At the top of the screen you can see:</h4>
                  <img class="d-block img-sm" src="../assets/ielts-1-listening-gap-fill.png"
                    alt="Candidate information">
                  <p>Your name and candidate number.</p>
                  <img class="d-block img-sm" src="../assets/ielts-1-listening-gap-fill.png" alt="Timer">
                  <p>A clock, which tells you how much time you have left. When you hover over the time you can
                    see the seconds.</p>

                  <hr>

                  <img class="d-inline-block img-sm" src="../assets/ielts-1-listening-gap-fill.png" alt="Help button">
                  <p class="d-inline-block">Click to view the help.</p>
                  <br>
                  <img class="d-inline-block img-sm" src="../assets/ielts-1-listening-gap-fill.png" alt="Hide button">
                  <p class="d-inline-block">Click to hide the screen content temporarily.</p>

                  <hr>

                  <h4>Volume</h4>
                  <p>If you want to change the volume of the Listening test, click on the volume slider.</p>
                  <img class="d-block img-sm" src="../assets/ielts-1-listening-gap-fill.png" alt="Volume slider">

                  <hr>

                  <h4>Navigation</h4>
                  <p>At the bottom of the screen you can see the navigation bar</p>
                  <img class="d-block img-sm" src="../assets/ielts-1-listening-gap-fill.png" alt="Navigation bar">
                  <p>Click on a number to go to that question.</p>

                  <img class="d-inline-block img-sm" src="../assets/ielts-1-listening-gap-fill.png" alt="Next question">
                  <p class="d-inline">Click to go to the next question</p>
                  <br>
                  <img class="d-inline-block img-sm" src="../assets/ielts-1-listening-gap-fill.png"
                    alt="Previous question">
                  <p class="d-inline">Click to go to the previous question</p>
                  <br>
                  <img class="d-inline-block img-sm" src="../assets/ielts-1-listening-gap-fill.png" alt="Review">
                  <p class="d-inline">Click if you want to look at this question again later. The question number in the
                    navigation
                    bar will turn into a circle.</p>
                  <br>

                  <img class="d-inline-block img-sm" src="../assets/ielts-1-listening-gap-fill.png"
                    alt="Blue highlighting">
                  <p class="d-inline">The blue highlighting shows the question you are looking at.</p>
                  <br>

                  <img class="d-inline-block img-sm" src="../assets/ielts-1-listening-gap-fill.png" alt="Underline">
                  <p class="d-inline">The underlining shows that you have answered this question.</p>
                  <br>

                  <img class="d-inline-block img-sm" src="../assets/ielts-1-listening-gap-fill.png" alt="Circle">
                  <p class="d-inline">The circle shows that you want to look at this question again (marked for review).
                  </p>
                  <br>

                  <img class="d-inline-block img-sm" src="../assets/ielts-1-listening-gap-fill.png" alt="Black">
                  <p class="d-inline">The black highlighting shows that you have not answered the question.</p>

                  <hr>

                  <h4>Highlighting</h4>
                  <p class="">To highlight something in the test:</p>
                  <p class="bold">Select the text you want to highlight using the mouse.</p>
                  <p class="bold">Right click over the text.</p>
                  <img class="d-block img-md" src="../assets/ielts-1-listening-gap-fill.png" alt="Context menu">
                  <br>

                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Menu item - highlight"
                    class="d-inline-block img-xs">
                  <p class="d-inline">Click to highlight the text you have selected.</p>
                  <br>
                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Menu item - notes"
                    class="d-inline-block img-xs">
                  <p class="d-inline">Click to highlight the text you have selected and to add notes about what you have
                    highlighted.</p>

                  <br>
                  <br>

                  <h4>Notes</h4>
                  <p class="d-block">To close the notes click on X in the top right. To view the notes right-click on
                    the highlighted text (anything you write in Notes will be deleted at the end of the test).</p>
                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Notes" class="d-block img-md">
                  <br>

                  <p class="d-block">You can locate those areas of highlighted text containing notes by hovering over
                    each highlighted text. If a small orange box appears the highlighted text contains notes.</p>
                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Highlighted text" class="d-block img-md">
                  <br>
                  <p class="d-block">To clear your highlighting right click on the highlighted text.</p>
                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Context menu - clear" class="d-block img-md">
                  <br>

                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Menu item - clear"
                    class="d-inline-block img-xs">
                  <p class="d-inline">Click to clear the highlighting. This will also clear any notes you have made.</p>
                  <br>
                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Menu item - clear all"
                    class="d-inline-block img-xs">
                  <p class="d-inline">Click to clear all highlighting including notes.</p>
                </div>
              </el-tab-pane>
              <el-tab-pane label="Task help" name="third">
                <div class="section-block">
                  <p>To choose a question either click on the question number at the bottom of the screen or click on
                    the question.</p>
                  <hr>
                  <h4>Gap fill questions</h4>
                  <p>To answer some questions, you need to write words or numbers in a gap. To answer these
                    questions, click in the gap and write your answer. Some questions may ask you to write your
                    answer in a table, flow-chart or diagram.</p>
                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Gap fill questions" class="d-block img-lg">
                  <hr>
                  <h4>Drag and drop questions</h4>
                  <p>To answer a question, click on the answer on the right</p>
                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Drag and drop questions"
                    class="d-block img-lg">
                  <p>and move it into the gap on the left.</p>
                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Drag and drop questions"
                    class="d-block img-lg">
                  <p>If you want to change your answer, move another answer into the gap.</p>
                  <p>If you want to leave the question unanswered, move the answer back.</p>
                  <p>Don't forget! You may need to scroll to see all the questions and answers.</p>

                  <hr>

                  <h4>Multiple choice questions</h4>
                  <p>Click on the answer you think is right.</p>
                  <p>If you change your mind, click on a different answer.</p>
                  <p>If you want to leave the question unanswered, click on your answer again.</p>
                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Multiple choice questions"
                    class="d-block img-lg">

                  <hr>

                  <h4>Multiple choice questions where there is more than one answer</h4>
                  <p>Some questions may ask you to choose two or three answers. Make sure you read the instructions and
                    questions carefully.</p>
                  <img src="../assets/ielts-1-listening-gap-fill.png"
                    alt="Multiple choice questions with more than one answer" class="d-block img-lg">
                  <p>Click on the answers you think are right.</p>
                  <p>If you change your mind, click on a different answer.</p>
                  <p>If you want to leave the question unanswered, click on your answer again.</p>

                  <hr>
                  <h4>Matching questions using a table</h4>
                  <p>To select a question, click on the question number in the table. The column will become shaded.</p>
                  <img src="../assets/ielts-1-listening-gap-fill.png" alt="Matching questions using a table"
                    class="d-block img-lg">
                  <p>Select the correct option by clicking on a space in the table. A tick will appear.</p>
                  <p>If you want to change your answer, click on another space.</p>
                  <p>If you want to leave the question unanswered, click on the space again.</p>
                  <p>Sometimes you may choose an answer more than once. Make sure you read the instructions and
                    questions carefully.</p>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="exam-help__footer">
            <div class="button" @click="hideHelpModal">Ok</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'help',
    data() {
      return {
        activeName: 'third'
      }
    },
    methods: {
      hideHelpModal() {
        this.$emit('hideHelpModal');
      }
    },
    mounted() {}
  }

</script>

<style lang="less">
  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    font-size: 10px;
  }

  .custom-mark {
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -ms-touch-action: none;
    touch-action: none;
  }

  .custom-popup-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100001;
    background-color: rgba(0, 0, 0, .4);
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;

    .popup-body {
      text-align: left;
      position: relative;
      border: none;
      border-radius: 4px;
      -webkit-box-shadow: 0 0 4px #8b8b8b;
      box-shadow: 0 0 4px #8b8b8b;
      background-color: transparent;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }

  .exam-help__content {
    min-height: 12.5rem;
    max-height: 80%;
    padding: .83333rem;
    position: relative;
    overflow-y: scroll;

    .exam-help__section {
      display: flex;
      flex-direction: column;
      margin-bottom: 1.5625rem;

      .title {
        font-size: 1.25rem;
        line-height: 1.875rem;
        font-weight: 700;
        color: #222;
      }

      .lines {
        margin: .52083rem 0 0 2.08333rem;
      }

      li {
        list-style: disc;
        height: 1.25rem;
        line-height: 1.25rem;
        font-size: .98958rem;
        color: #222;
      }
    }

    .section-block {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      position: relative;
    }

    .section-block {
      display: block;
      min-height: 10.41667rem;
      position: relative;

      img {
        max-width: 100% !important;
        height: auto !important;
        width: 100%;
      }
    }
  }

  #help-modal {
    text-align: left;
  }

  .exam-help,
  .exam-help__title {
    display: flex;
    -webkit-box-direction: normal;
  }

  .exam-help {
    flex-direction: column;
    width: 41.66667rem;
    max-height: 90%;
    position: relative;
    background: #fff;
    margin: 1.45833rem auto;
  }

  .exam-help__title {
    height: 4.79167rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #e8e8e8;
    padding: .9375rem .20833rem 0 .83333rem;

    .text {
      font-size: 1.25rem;
      height: 1.66667rem;
      line-height: 1.66667rem;
      font-weight: 700;
      color: #222;
    }

    .close {
      width: 3.02083rem;
      height: 3.02083rem;
      background: url() 50% no-repeat;
      background-size: .67708rem .67708rem;
      border: 3px solid transparent;
      cursor: pointer;
      z-index: 10;
    }

    .close:hover {
      border: 3px solid #92b5f4;
    }
  }

  .exam-help__footer {
    height: 4.85417rem;
    padding-right: .9375rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid #e8e8e8;

    .button {
      width: 3.125rem;
      height: 1.97917rem;
      line-height: 1.97917rem;
      background: #faf6f6;
      border-radius: 4px;
      font-size: .83333rem;
      font-weight: 700;
      color: #222;
      vertical-align: middle;
      text-align: center;
      border: 3px solid transparent;
      cursor: pointer;
    }

    .button:active {
      border: 3px solid #92b5f4;
    }
  }

</style>
